<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>短租排序</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/shortrent.shortrent.css">
    <script type="application/javascript" src="../js/jquery-3.3.1.js"></script>
    <script type="application/javascript" src="../js/bootstrap.min.js"></script>
    <script type="application/javascript" src="../layui/layui.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body id="app">
<div data-v-67ef3a4a class="csdheader">
    <div data-v-67ef3a4a class="layout clear">
        <div data-v-67ef3a4a class="left csdnav">
            <label data-v-67ef3a4a>
                <a data-v-67ef3a4a href="#" id="noda">你好</a>
                <a data-v-67ef3a4a href="javascript:" class="colorRed">/</a>
                <a data-v-67ef3a4a href="index.html" class="colorRed" style="margin-right: 10px;">[退出]</a>

            </label>


            <a data-v-67ef3a4a="" href="#mobileZuChe">手机租车</a>
            <a data-v-67ef3a4a="" href="helpCenter.html">帮助中心</a>
        </div>
        <div data-v-67ef3a4a="" class="right phone">
            <div data-v-67ef3a4a="" class="typeTab">
                <a data-v-67ef3a4a="" href="index.html" style="color: rgb(199, 0, 11);">中文</a>&nbsp;/&nbsp;
                <a data-v-67ef3a4a="" href="../en/index.html">English</a>
            </div>
            <div data-v-67ef3a4a="" class="menu">
                <a data-v-67ef3a4a="" href="login.html">我的车速递</a>
            </div>
            <div data-v-67ef3a4a="">
                <i class="layui-icon layui-icon-cellphone" style="font-size:14px;  color:#c6000f;"></i>
                <span data-v-67ef3a4a="">400-919-8000</span>
            </div>
        </div>

    </div>
</div>


<div data-v-39f7f629 class="csdnav">
    <div data-v-39f7f629="" class="layout clear">
        <div data-v-39f7f629="" class="left logo">
            <a data-v-39f7f629="" href="index.html">
                <img data-v-39f7f629=""
                     src="">
            </a>
        </div>
        <div data-v-39f7f629="" class="left navCom">
            <ul data-v-39f7f629="">
                <li data-v-39f7f629="">

                    <a data-v-39f7f629="" href="https://www.chesudi.com/module/activity.html" target="_self">优惠活动</a>
                </li>
                <li data-v-39f7f629="">
                    <a data-v-39f7f629="" href="https://www.chesudi.com/module/joinWork.html" target="_blank" class="">加盟合作</a>
                </li>
                <li data-v-39f7f629="">
                    <a data-v-39f7f629="" href="https://www.chesudi.com/module/netCar.html" target="_blank"
                       class="">网约车</a>
                </li>
                <li data-v-39f7f629="">
                    <a data-v-39f7f629="" href="https://www.chesudi.com/module/longRent.html" target="_blank" class="">企业长租</a>
                </li>
                <li data-v-39f7f629="">
                    <a data-v-39f7f629="" href="shortrent.html" target="_self" class="colorRed">短租自驾</a>
                </li>
                <li data-v-39f7f629="">
                    <a data-v-39f7f629="" href="index.html" target="_self">
                        <span data-v-39f7f629="">首页</span></a>
                </li>
            </ul>
        </div>
    </div>
</div>

<!--<div class="selCarMsg">-->
<!--    <div class="selCarMsgCom">-->
<!--        <div class="Msg">取车地址：{{getcitys}}</div>-->
<!--    </div>-->

<!--    <div class="selCarMsgCom">-->
<!--        <div class="Msg">还车地址：{{backcitys}}</div>-->
<!--    </div>-->
<!--</div>-->

<div class="carListTab">
    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
        <ul class="layui-tab-title">
            <li class="layui-this">按租金排序</li>
            <li>按热度排序</li>
        </ul>
        <div class="layui-tab-content">


            <div class="layui-tab-item layui-show">
                <!--for循环这段代码-->

                <div class="item clear" id="carlist">
                    <div class="thisPlace clear" id="carli" v-for="site in sites">
                        <div class="itemCarImg left">
                            <img :src="site.picture">
                        </div>
                        <div class="itemCarMsg left">
                            <h1 id="sitename">{{site.name}}</h1>
                            <p id="sitetype">{{site.types}}</p>
                            <p id="sitenum">{{site.sitnum}}座</p>
                        </div>
                        <div class="itemPriceMsg left">
                            <div class="itemPriceMsgC left">
                                <p class="p1">
                                    <span id="siteprice">{{site.price}}</span>/日均
                                </p>
                            </div>
                            <div class="carLiBao">5天以上立减 5元/天</div>
                        </div>

                        <div class="itemBtn left">
                            <button class="butt" @click="selectCar(site.id)">预定</button>
                        </div>
                    </div>
                </div>

            </div>

<!--            <div class="layui-tab-item">-->


<!--                <div class="item clear" id="carlis">-->
<!--                    <div class="thisPlace clear" id="carl" v-for="site in site">-->
<!--                        <div class="itemCarImg left">-->
<!--                            <img :src="site.picture">-->
<!--                        </div>-->
<!--                        <div class="itemCarMsg left">-->
<!--                            <h1>{{site.name}}</h1>-->
<!--                            <p>{{site.type}}</p>-->
<!--                            <p>{{site.sitnum}}座</p>-->
<!--                        </div>-->
<!--                        <div class="itemPriceMsg left">-->
<!--                            <div class="itemPriceMsgC left">-->
<!--                                <p class="p1">-->
<!--                                    <span>{{site.price}}</span>/日均-->
<!--                                </p>-->
<!--                            </div>-->
<!--                            <div class="carLiBao">5天以上立减 5元/天</div>-->
<!--                        </div>-->

<!--                        <div class="itemBtn left">-->
<!--                            <button class="butt" @click="selectCar(site.id)">预定</button>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
        </div>
    </div>
</div>
<script>
    new Vue({
        el: '#carlist',
        data: {
            sites: []
        },
        methods:{
            selectCar:function(id){
                window.localStorage.setItem("id", id);
                window.location.href="ordersubmit.html"
            }
        },
        created: function () {
            var sites = this;
            $.ajax({
                url: '/Car/Cars',
                type: "post",
                contentType: "application/json",
                dataType: "json"
            }).then(function (res) {
                sites.sites = res.data;
            })
        }
    })
</script>
</body>
</html>